<template>
  <div class="article-list">
    <!-- 下拉更新组件 -->
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      success-duration="1500"
      :success-text="refreshText"
    >
      <!-- 使用 vant 列表组件 -->
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :error.sync="error"
        error-text="服务器繁忙，点击再试..."
        finished-text="没有更多了"
        :immediate-check="true"
      >
        <ArticleItem v-for="(a, i) in list" :key="i" :art="a" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getChanArticles } from '@/api/article.js'
import ArticleItem from '@/components/ArticleItem.vue'

export default {
  name: 'ArticleList',
  components: {
    ArticleItem
  },
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      list: [],
      error: false, // 记录 list 组件 是否 显示 错误提示
      loading: false,
      finished: false,
      timestamp: null,
      refreshText: '更新成功了，哥哥',
      isLoading: false // 记录 pull-refresh组件 是否处于 更新状态
    }
  },
  methods: {
    // 请求 文章分页数据
    async getArticles() {
      this.error = false
      const p = {
        channel_id: this.channel.id,
        // 如果 之前请求过，那么 就是用 上次请求的时间戳，否则 使用当前时间
        timestamp: this.timestamp ? this.timestamp : Date.now(),
        with_top: 1
      }
      try {
        // 模拟请求出错
        // if (Math.random() > 0.5) {
        //   console.log(Math.random())
        //   JSON.parse('asd;flkjas;dlfkha;sdlkfh')
        // }
        // 发送请求 获取 接口数据
        console.log('------------------------------------------')
        console.log('getChanArticles->', getChanArticles)
        const { data: res } = await getChanArticles(p)
        // 保存 返回的 时间戳（用来请求下一页数据）
        this.timestamp = res.pre_timestamp
        // 保存 当前请求的 数组
        // 注意：由于 还要请求 更多页的数据，所以 不能 直接覆盖原数组
        // 而是 追加到 原数组中
        this.list.push(...res.data.results)

        // 关闭 正在加载状态
        this.loading = false

        // 如果 返回的 数据 长度 为 0，则 彻底 关闭 当前 列表的【触底加载】功能
        if (res.data.results.length === 0) {
          this.finished = true
        }
      } catch (error) {
        // 告诉 列表 出错了，不要再 触底加载 了，并且 显示 错误提示！
        this.error = true
        this.loading = false
        console.log('加载 新闻列表出错啦！', error)
      }
    },
    // 请求下一页数据
    // load 事件 ：触发时机  有两个： list组件 初始化 +  触底加载！
    onLoad() {
      console.log('onload', Date.now())
      this.getArticles()
    },
    // 下拉更新事件--------------
    // 获取 最新的 数据，添加到 数组的 头部
    async onRefresh() {
      try {
        // 模拟请求出错
        // if (Math.random() > 0.5) {
        //   console.log(Math.random())
        //   JSON.parse('asd;flkjas;dlfkha;sdlkfh')
        // }
        const p = {
          channel_id: this.channel.id,
          // 如果 之前请求过，那么 就是用 上次请求的时间戳，否则 使用当前时间
          timestamp: Date.now(),
          with_top: 1
        }
        const { data: res } = await getChanArticles(p)
        // 取出 最新的 数据
        const results = res.data.results
        // 将 最新数据 添加到 列表头部
        this.list.unshift(...results)
        // 更新 成功消息
        this.refreshText = `更新成功了${results.length}条，哥哥~`
        // 标记 更新数据 结束
        this.isLoading = false
      } catch (error) {
        // 标记 更新数据 结束
        this.isLoading = false
        // 失败消息
        this.refreshText = '服务器繁忙，请温柔再试~~'
      }
    }
  },
  // 请求 首页数据
  created() {
    // this.getArticles()
  }
}
</script>

<style lang="less" scoped>
.article-list {
  height: 79vh;
  overflow-y: auto;
}
</style>
